<template>
    <div>
        <van-nav-bar     fixed=true  placeholder=true title="我的余额" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-panel title="余额" :desc="this.balance">
            <!-- <div>¥：{{this.balance}}</div> -->
            <template #footer>
                <van-field type="digit" v-model="number" center clearable label="充值" placeholder="请输入充值金额"
                    @input="inputchange">
                    <template #button>
                        <van-button size="small" type="danger" v-bind:loading="showLoading"
                            v-bind:disabled="disablesubmit" @submit.once="check" @click="submit">确认</van-button>
                    </template>
                </van-field>
            </template>
        </van-panel>
    </div>
</template>
<script>
import { Toast } from 'vant'
export default {
    name: "余额",
    data() {
        return {
            balance: 0,
            uid: 0,
            number: "",
            disablesubmit: true,
            showLoading: false,
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        inputchange(e) {
            if (e <= 10000 && e > 0) {
                this.disablesubmit = false
                this.totalPrice = (this.product.price * this.days + this.product.guarentee) * 100
            } else if (e > 10000) {
                this.disablesubmit = true
                Toast.fail("充值金额不能大于10000")
            } else if (e == "") {
                this.disablesubmit = true
                Toast.fail('充值金额不能为空')
            }
            else if(e<0){
                this.disablesubmit = true
                Toast.fail('充值金额不能小于0')
            }
        },
        submit() {
            this.showLoading = true
            this.axios({
                method: "put",
                url: "aapi/me",
                data: {
                    uid: this.uid,
                    balance: this.balance + this.number*1
                }
            }).then(() => {
                this.showLoading = false
                this.$router.go(-1)
            }).error(() => {
                Toast.fail("网络错误请重试")
                this.showLoading = false
            })
        }
    },
    created() {
        this.balance = this.$store.state.balance
        this.uid = this.$store.state.uid
    }
}
</script>